<section class="row3 wrapper min720">
<?php $this->load->view('com_tutors/views_steps_success.php'); ?>
    <article class="pading10">
        <p class="heading-24 colorff9900">Hình ảnh của bạn có kích thước quá lớn</p>
        <p class="heading-16 color777">
            10+ đã đưa ra chức năng cắt ảnh đại diện . Vui lòng chọn vùng hình ảnh bạn cần cắt.
        </p>
        <p class="heading-16 color777">
            Hình ảnh của bạn hiện tại như sau :
        </p>
        <div class="form_crop clearfix">
            <form action="<?php echo base_url().'dang-ky/crop2.html'; ?>" method="POST" enctype="multipart/form-data">
                <input type="text" size="4" id="x" class="hidden" name="x" />
                <input type="text" size="4" id="y" class="hidden" name="y" />
                <input type="text" size="4" id="x2" class="hidden" name="x2" />
                <input type="text" size="4" id="y2" class="hidden" name="y2" />
                <input type="text" size="4" id="w" class="hidden" name="w" />
                <input type="text" size="4" id="h" class="hidden" name="h" />
                <input type="hidden" size="4" id="h" value="<?php echo $images['file_name']; ?>" class="hidden" name="nameimages" />
                <input type="hidden" size="4" id="fullpatch" class="hidden" name="fulloatch" value="<?php echo $images['full_path']; ?>" />
                <input type="submit" id="crop_images" class="float-right btn_grren btn upload" value="Đã cắt xong" style="border: none;" />
            </form>
        </div>
        <div id="cropimages" class="clearfix">
            <div class="big_img">
                <img id="jcrop_target" src="<?php echo base_url().'upload/avartars/'.$images['file_name']; ?>" alt="10+ cổng trao đổi thông tin trực tuyến giữa giáo viên và học sinh" />
            </div>
            <style>
            .big_img{
                text-align:center;
                margin-top:15px;
            }
            .big_img img
            {
                border:2px solid #fff;
                box-shadow:0px 0px 5px #777777;
            }
            </style>
        </div>
    </article>
    <footer>  
    </footer>
</section>
<script language="Javascript">
	// Remember to invoke within jQuery(window).load(...)
	// If you don't, Jcrop may not initialize properly
	$(function(){
		$('#jcrop_target').Jcrop({
			onChange: showCoords,
			onSelect: showCoords,
            setSelect:   [ 0, 200, 150, 0 ],
            minSize: [108, 150],
            aspectRatio: 3 / 4
		});
	});

	// Our simple event handler, called from onChange and onSelect
	// event handlers, as per the Jcrop invocation above
	function showCoords(c)
	{
		$('#x').val(c.x);
		$('#y').val(c.y);
		$('#x2').val(c.x2);
		$('#y2').val(c.y2);
		$('#w').val(c.w);
		$('#h').val(c.h);
	};

</script>